<template>
	<view class="content">
		<!-- 商品盒子 -->
		<view class="goods_box" v-for="item in goodsList">
			<!-- 订单编号 -->
			<view
				style="display: flex; justify-content: space-between; width: 95%; height: 80rpx; align-items: center; border-bottom: 2rpx solid #efefef;">
				<p>订单编号：<span>{{item.orderNumber}}</span></p>
				<span style="color: #1AB784;">{{item.statusStr}}</span>
			</view>
			<!-- 商品信息 -->
			<view class="goods_newsimps">
				<image :src="item.pic" mode="" style="width: 144rpx; height:144rpx;"></image>
				<div class="goods_content">
					<p class="goods_name" style="font-size: 14px;">{{item.goodsName}}</p>
					<p class="goods_card_prop" style="font-size: 12px;color: #969799;">数量:{{item.number}}</p>
				</div>
				<p class="goodes_price">
					<span>￥{{item.amountSingle}}</span>
					<!-- <span style="font-size: 24rpx; color: #c1c1c1; text-align: right;">×{{item.number}}</span> -->
				</p>
			</view>
			<!-- <h1>查看全部{{item.goodsNumber}}件商品</h1> -->
			<!-- <div class="list_item_total"><span>共{{item.goodsNumber}}件商品</span>实付款￥<span
					style="font-size: 30rpx;font-weight: 600;">{{item.amount}}</span></div> -->
			<u-button @click="cli"  shape="circle" size="medium" :plain="true"
				style="color: #1ba784; width: 300rpx; height: 80rpx; margin-left: 60%;border: 2rpx solid #1ba784;">
				申请售后</u-button>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: "",
				goodsList: [],
				orderList:[],
				statusBatch: "",
				
			}
		},
		methods: {
			getData() {
			
				var that = this
				uni.request({
					url: "https://api.it120.cc/xiaochengxu/order/list",
					method: "post",
					dataType: "json",
					data: {
						statusBatch:that.statusBatch,
						token: that.token
					},
					header: {
						"X-Token": that.token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						// console.log(res);
						// console.log(res.data.data.goodsMap);
						// that.goodsList1 = res.data.data.orderList
						that.goodsList=[]
						if(res.data.msg=="success"){
						let temp = res.data.data.goodsMap
						for (let i in temp) {
							// console.log(temp[i]);
							that.goodsList.push(temp[i][0])
							// console.log(that.goodsList);
						}
			
						that.orderList = res.data.data.orderList
						that.goodsList.forEach((r, i) => r.orderNumber = that.orderList[i].orderNumber)
						// that.goodsList.forEach((r, i) => r.goodsNumber = that.orderList[i].goodsNumber)
						that.goodsList.forEach((r, i) => r.statusStr = that.orderList[i].statusStr)
						console.log(that.goodsList);
						}
					}
				})
			},
			
			cli:function(){
				uni.navigateTo({
					url:"/pages/orderList/orderAfterService"
				})
			}
		},
		onShow() {
		
			let that = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
		
					console.log(res.data);
					that.token = res.data
					that.getData()
				},
				fail: function(res) {
					console.log(res);
					that.token = ""
				}
		
			})
		
		
		}
		
	}
</script>

<style lang="scss" scoped>
.content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgb(247, 248, 250);
	.goods_box{
		width: 95%;
		height: 570rpx;
		background-color: #fff;
		border-radius: 0.8rem;
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		font-size: 28rpx;
		.goods_content {
			flex: 1;
			margin-right: 3.2vw;
		}
		.goods_newsimps {
			width: 95%;
			height: 30%;
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #efefef;
		
			
		
			.goodes_price {
				display: flex;
				flex-direction: column;
		
			}
		}
	}
}
</style>
